<template>
	<view class="ActivityDetails">
		<!-- #ifdef APP-PLUS -->
		<!-- <view class="status_bar">
		</view>
		<u-navbar back-text="返回" title="活动详情">
			<view class="IconBox" slot="right">
				<view class="starBox">
					<u-icon name="star" size="50" color="#515151"></u-icon>
				</view>
				<u-icon name="bell" size="50" color="#515151"></u-icon>
			</view>
		</u-navbar> -->
		<!-- #endif -->
		
		<view>
			<view class="ActivityDetailsBox">
				<view class="extensionBox">
					<view class="extensionBox_top">
						<view class="extensionNameBox">
							<view class="extensionName">{{info.title}}</view>
							<view class="extensionPrice">￥{{info.talent_money}}</view>
						</view>
						<view class="Number" style="display: flex;align-items: center;justify-content: space-between;padding-right: 24upx;">
							<view>数量：{{info.num}}份</view>
							<view v-if="info.endStr">报名截止：{{info.endStr}}</view>
							<view>押金：{{info.frozen_money}}元</view>
						</view>
						<view class="fieldBox">
							<view class="fieldtitle">领域：</view>
							<view class="fieldList">
								<!-- <view class="fieldItem" v-if="info.shopObj" v-for="(item,index) in info.ShopEvaluationLabel" :key="index">{{item.label.name}}</view> -->
								<view class="fieldItem" v-if="info.shopObj">{{info.shopObj.Shop.industry.name}}</view>
							</view>
						</view>
						<view class="fansBox">
							<view class="fansImage" v-if="info.platform==1">
								<image src="/static/index/fans.png" mode=""></image>
							</view>
							<view class="fansImage" v-if="info.platform==2" style="background: #F40A0B;">
								<image src="../../static/mine/xiaohongshu_white.png" mode="widthFix"
									style="width: 36upx;"></image>
							</view>
							<view class="fansImage" v-if="info.platform==3" style="background: #FFD974;">
								<image src="../../static/mine/weibo_white.png" mode="widthFix" style="width: 20upx;">
								</image>
							</view>
							<view class="fansImage" v-if="info.platform==4" style="background: #F36326;">
								<image src="../../static/mine/dazong_white.png" mode="heightFix" style="height: 24upx;">
								</image>
							</view>

							<view class="fanstext">
								<text>粉丝数{{info.fans_num}}以上</text>
								<text v-if="info.platform==4">;等级{{info.public_grade}}以上</text>
							</view>
						</view>
					</view>
					<!-- <view class="extensiontitleBox">
						<view class="extensionImage">
							<image src="" mode=""></image>
						</view>
						<view class="extensiontitle">瑞幸咖啡</view>
					</view> -->
				</view>
				<view class="PackageBox">
					<view class="Package_L">提供套餐</view>
					<view class="Package_R" @click="toOfferDetails">
						<view class="PackagePrice">{{info.ShopPackage?info.ShopPackage.name:info.package_name}}</view>
						<u-icon name="arrow-right" color="#BFBFBF"></u-icon>
					</view>
				</view>
				<view class="addressBox">
					<view class="addressTitleBox" @click="toStore">
						<view class="addresstitle">
							活动地址（{{info.ShopEvaluationRelation?info.ShopEvaluationRelation.length:0}}）</view>
						<u-icon name="arrow-right" color="#BFBFBF"></u-icon>
					</view>
					<view class="addressNameBox">
						<view class="addressName" @click="toRecommendStore" v-if="info.shopObj">
							{{info.shopObj.Shop.name}}</view>
						<u-icon name="phone-fill" color="#FFAC3F" @click="callPhone"></u-icon>
					</view>
					<view class="Detailed-address" @click="openMap">
						<view class="Detailed_L">
							<u-icon name="map" color="#BFBFBF" size="40"></u-icon>
							<view class="Detailedtext" v-if="info.shopObj">{{info.shopObj.Shop.detailed_address}}</view>
						</view>
						<view class="Detailed_R">
							<view class="DetailedNum" v-if="info.shopObj">{{info.shopObj.distance}}km</view>
							<u-icon name="arrow-right" color="#BFBFBF"></u-icon>
						</view>
					</view>
				</view>
				<view class="detailsBox">
					<view class="detailstitle" style="font-weight: bold;">内容详情</view>
					<!-- <view class="detailsCont">
						{{info.content}}
					</view> -->
					<textarea class="detailsCont" v-model="info.content" disabled :auto-height="true" maxlength="-1"></textarea>
					<view style="margin-top: 30upx;"
						v-if="info.ShopEvaluationExampleImage&&info.ShopEvaluationExampleImage.length>0">
						<image :src="getImage(item.image_url)" mode="widthFix" style="width: 100%;margin-bottom: 20upx;"
							v-for="(item,index) in info.ShopEvaluationExampleImage" :key="index"></image>
					</view>
					<view class="detailstitle" style="font-weight: bold;">规则说明</view>
					<view class="detailsCont" v-html="rules_desc"></view>
					<view class="detailstitle" style="font-weight: bold;">平台声明</view>
					<view class="detailsCont" v-html="platform_desc"></view>
				</view>
				<view class="ButtonBox" v-if="!isend">
					<!-- <view class="ButtonItem">
						<view class="Buttonttle">转发达人</view>
						<view class="Buttontext">赚￥3.88</view>
					</view> -->
					<!-- <image src="/static/mine/collect.png" class="collect"></image> -->
					<!-- <image src="../../static/mine/notice.png" class="notice"></image> -->
					<view class="ButtonItem" @click="toSharePosters">
						<view class="Buttonttle">转发达人</view>
						<!-- #ifdef APP -->
						<view class="Buttontext">赚￥{{info.user_commission_money}}</view>
						<!-- #endif -->
					</view>
					<view class="signupBtn" @click="toSubmits">{{info.num==0?'名额已满':'立即报名'}}</view>
				</view>
				<view class="endBox" v-else>已结束</view>
			</view>
			<number-jpan :length="6" @closeChange="closeChange($event)" :showNum="false" ref="numberPad"></number-jpan>
			<u-toast ref="uToast" />
			<view class="shareMark" v-if="shareFlag" @click="hideShare"></view>
			<view class="shareCon" v-if="shareFlag">
				<view class="shareItem" @click="toMaterial">
					<image src="../../static/index/WeChat.png"></image>
					<view>素材</view>
				</view>
				<!-- #ifdef APP -->
				<view class="shareItem" @click="shareWeiXin">
					<image src="../../static/index/WeChat.png"></image>
					<view>微信好友</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="share" class="shareBtns">
					<view class="shareItem">
						<image src="../../static/index/WeChat.png"></image>
						<view>微信好友</view>
					</view>
				</button>
				<!-- #endif -->
				<view class="shareItem" @click="savePhoto">
					<image src="../../static/index/savePhoto.png"></image>
					<view>保存相册</view>
				</view>
			</view>
			<image class="posterUrl" :src="posterUrl" mode="heightFix" v-if="shareFlag&&posterUrl"></image>
		</view>

		<view class="poster">
			<image src="../../static/share/backT.png" class="backT"></image>
			<image src="../../static/share/back.png" class="backMain"></image>
			<image src="../../static/share/backB.png" class="backB"></image>
			<image src="../../static/share/backLTxt.png" class="backLTxt"></image>
			<image src="../../static/share/backRCp.png" class="backRDr"></image>
			<view class="conT">
				<view class="conUserMsg">{{shareStr}}</view>
				<view class="conCardList"
					v-if="info.ShopEvaluationExampleImage&&info.ShopEvaluationExampleImage.length>0">
					<image :src="getImage(info.ShopEvaluationExampleImage[0].image_url)" mode="widthFix"
						class="conCardListImg"></image>
				</view>
			</view>
			<view class="conB">
				<!-- <view class="conBL">
					<image :src="getImage(info.image_url)" class="conBLImg"></image>
				</view> -->
				<view class="conBC">
					<view class="conBCName">与【{{userInfo.username}}】一起在若免</view>
					<view class="conBCIntro">分享好物，更多惊喜等你搜寻！</view>
				</view>
				<view class="conBR">
					<image :src="codeImg" class="conBRImg"></image>
				</view>
			</view>
		</view>
		<view class="toastMark" v-if="markFlag" @click="markFlag=false"></view>
		<view class="toastWrap" v-if="markFlag">
			<view class="toastWrapTit">
				报名将冻结您的余额<text>{{info.frozen_money}}</text>元
			</view>
			<view class="toastWrapCon">到店后逾期不交稿或交稿后删稿，该金额将扣除用于结付给商户；正常交稿后7天无商户的删稿投诉，该金额与稿费同步解冻。</view>
			<view class="toastBtn">
				<view class="later" @click="markFlag=false">稍后</view>
				<view class="onSure" @click="toSubmit">确认</view>
			</view>
		</view>
		<canvas :style="{'width':posterData.poster.width +'px','height': posterData.poster.height+'px'}" class="can"
			canvas-id="mycan"></canvas>
		<!-- <view @click="getPoster" style="position: fixed;">保存保存吧</view> -->
	</view>
</template>

<script>
	const app = getApp();
	import numberJpan from "@/components/numberJpan/numberJpan.vue";
	export default {
		data() {
			return {
				content: `<p>露从今夜白，月是故乡明</p><img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />`,
				isend: false,
				info: {},
				initLat: "",
				initLng: "",
				shareFlag: false,
				userInfo: {},
				shareStr: "",
				codeImg: "",
				posterData: {
					poster: {}
				},
				canvasFlag: false,
				posterUrl: "",
				markFlag: false,
				rules_desc:"",
				platform_desc:""
			}
		},
		components: {
			'number-jpan': numberJpan
		},
		onShareAppMessage(e) {
			// console.log(e);
			return {
				title: this.shareStr,
				path: '/pages/pageone/pages/ActivityDetails/ActivityDetails?shareid=' + uni.getStorageSync("userId") +
					"&cpid=" + this.id,
				imageUrl: this.getImage(this.info.ShopEvaluationExampleImage[0].image_url)
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id;
			} else {
				if (options.cpid) {
					this.id = options.cpid;
				} else {
					this.id = 1;
				}
			}
			this.initLat = uni.getStorageSync("initLat");
			this.initLng = uni.getStorageSync("initLng");
			this.userInfo = uni.getStorageSync("rmUser");
			this.getDetail();
			this.getQrcode();
			this.getCommon();
		},
		methods: {
			getCommon(){
				console.log('````````````````````````````````665')
				this.$u.api.commonDetails({name:"rules_desc"}).then(res=>{
					this.rules_desc = res.data.details.rules_desc;
				})
				this.$u.api.commonDetails({name:"platform_desc"}).then(res=>{
					this.platform_desc = res.data.details.platform_desc;
				})
			},
			hideShare() {
				this.shareFlag = false;
			},
			toMaterial() {
				let arr = [];
				arr.push({
					url: this.posterUrl,
					flag: true
				});
				for (let i = 0; i < this.info.ShopEvaluationExampleImage.length; i++) {
					arr.push({
						url: this.getImage(this.info.ShopEvaluationExampleImage[i].image_url),
						flag: true
					});
				}
				let obj = {};
				obj.imgArr = arr;
				obj.shareTxt = this.shareStr + "https://www.ruomiankj.com/appShare.html?cpid=" + this.id + "&type=cp&shareid=" + uni
						.getStorageSync("userId");
				uni.setStorageSync("materialData", obj);
				uni.navigateTo({
					url: "/pages/pagethree/pages/material/material"
				})
			},
			getQrcode() {
				let obj = {};
				// #ifdef MP-WEIXIN
				obj.type = 1;
				// #endif
				// #ifdef APP
				obj.type = 2;
				// #endif
				obj.data = {};
				obj.data.type = "cp";
				if (uni.getStorageSync("rmToken")) {
					obj.data.shareid = uni.getStorageSync("userId");
				}
				obj.data.cpid = this.id;
				this.$u.api.qrcode(obj).then(res => {
					console.log(res);
					this.codeImg = res.data.data.replace(/[\n\r]/g, '');
				})
			},
			getElementInfo(name) {
				let _this = this;
				return new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + name).boundingClientRect(data => {
						_this.posterData[name] = data;
						console.log(_this.posterData)
						_this.$forceUpdate()
						resolve(data)
					}).exec();
				})

			},
			savePhoto() {
				uni.saveImageToPhotosAlbum({
					filePath: this.posterUrl,
					success: function() {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: "图片已下载至【图库】，请打开【图库】查看", // res.tempFilePath
						});
					},
					fail: err => {
						console.log(err)
					}
				});
			},
			getPoster() {
				uni.showLoading({
					title: "生成海报中..."
				})
				this.getElementInfo("poster").then(reb => {
					let promiseArr = [
						this.getElementInfo("backT"),
						this.getElementInfo("backMain"),
						this.getElementInfo("backB"),
						this.getElementInfo("backLTxt"),
						this.getElementInfo("backRDr"),
						this.getElementInfo("conT"),
						this.getElementInfo("conUserMsg"),
						this.getElementInfo("conCardListImg"),
						this.getElementInfo("conBCName"),
						this.getElementInfo("conBCIntro"),
						this.getElementInfo("conBR"),
						this.getElementInfo("conBRImg")
					];

					let ctx = uni.createCanvasContext('mycan');
					// this.getImageInfo("../../static/share/back.png","backMain").then(res=>{
					// 	console.log(res)
					// })
					console.log(ctx)
					Promise.all(promiseArr).then(res => {
						console.log(res)
						this.canvasFlag = true;
						this.$forceUpdate();
						ctx.drawImage("/static/share/back.png", this.posterData.backMain.left, this
							.posterData.backMain
							.top, this.posterData.backMain.width, this.posterData.backMain.height);
						ctx.drawImage("/static/share/backB.png", this.posterData.backB.left, this
							.posterData.backB.top,
							this.posterData.backB.width, this.posterData.backB.height);
						ctx.drawImage("/static/share/backT.png", this.posterData.backT.left, this
							.posterData.backT.top,
							this.posterData.backT.width, this.posterData.backT.height);
						ctx.drawImage("/static/share/backLTxt.png", this.posterData.backLTxt.left, this
							.posterData
							.backLTxt.top, this.posterData.backLTxt.width, this.posterData.backLTxt
							.height);
						ctx.drawImage("/static/share/backRCp.png", this.posterData.backRDr.left, this
							.posterData
							.backRDr.top, this.posterData.backRDr.width, this.posterData.backRDr.height
							);
						ctx.save();
						ctx.setFillStyle("#FFFFFF");
						ctx.setStrokeStyle('#FFFFFF')
						ctx.setLineJoin('round'); //交点设置成圆角
						ctx.setLineWidth(16);
						ctx.strokeRect(this.posterData.conT.left + 8, this.posterData.conT.top + 8, this
							.posterData
							.conT.width - 16, this.posterData.conT.height - 16);
						ctx.fillRect(this.posterData.conT.left + 16, this.posterData.conT.top + 16, this
							.posterData
							.conT.width - 32, this.posterData.conT.height - 32);
						ctx.stroke();
						ctx.closePath();
						ctx.save();
						ctx.restore();
						ctx.font = "bold 14px Microsoft YaHei";
						ctx.fillStyle = "#3F3F3F";
						ctx.textBaseline = "bottom";
						let intros = ""
						var chr = this.shareStr.split("");
						var temp = "";
						var row = [];
						console.log(chr)
						for (var a = 0; a < chr.length; a++) {
							// #ifdef MP-WEIXIN
							if (temp.length * 15 < this.posterData.conUserMsg.width) {
								;
							} else {
								row.push(temp);
								temp = "";
							}
							// #endif
							// #ifdef APP
							if (temp.length * 15 < this.posterData.conUserMsg.width) {
								;
							} else {
								row.push(temp);
								temp = "";
							}
							// #endif
							temp += chr[a];
						}
						row.push(temp);
						for (var b = 0; b < row.length; b++) {
							ctx.fillText(row[b], this.posterData.conUserMsg.left, this.posterData
								.conUserMsg.top + (b + 1) * 20);
						}
						ctx.restore();
						app.$vm.getImgBase(this.getImage(this.info.ShopEvaluationExampleImage[0]
							.image_url)).then(rekl => {
								console.log(rekl)
							ctx.drawImage(rekl, this.posterData.conCardListImg.left, this
								.posterData.conCardListImg.top, this.posterData.conCardListImg
								.width, this.posterData.conCardListImg.height);
							ctx.font = "15px Microsoft YaHei";
							ctx.fillStyle = "#FFFFFF";
							ctx.textBaseline = "middle";
							ctx.fillText('与【' + this.userInfo.username + '】一起在若免', this.posterData[
								'conBCName'].left, this.posterData['conBCName'].top + 11);
							ctx.save();
							ctx.restore();
							ctx.font = "12px Microsoft YaHei";
							ctx.fillStyle = "#FFFFFF";
							ctx.textBaseline = "middle";
							ctx.fillText('分享好物，更多惊喜等你搜寻！', this.posterData['conBCIntro'].left, this
								.posterData['conBCIntro'].top + 9);
							ctx.save();
							ctx.restore();
							ctx.setFillStyle("#FFFFFF");
							ctx.fillRect(this.posterData['conBR'].left, this.posterData['conBR']
								.top, this.posterData['conBR'].width, this.posterData['conBR']
								.height);
							// #ifdef MP-WEIXIN
							let fsm = wx.getFileSystemManager(); //文件管理器
							let FILE_BASE_NAME = new Date().getTime(); //文件名
							let format = 'png'; //文件后缀
							console.log(this.codeImg)
							let buffer = wx.base64ToArrayBuffer(this.codeImg.split(",")[1]); //base 转二进制
							let filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
							console.log(filePath)
							let _this = this;
							fsm.writeFile({ //写文件
								filePath,
								data: buffer,
								encoding: 'binary',
								success: rem1 => {
									wx.getImageInfo({ //读取图片
										src: filePath,
										success: rem2 => {
											ctx.drawImage(rem2.path, this
													.posterData['conBRImg']
													.left, this.posterData[
														'conBRImg'].top,
													this.posterData[
														'conBRImg'].width,
													this.posterData[
														'conBRImg'].height
													) //画图
											ctx.save();
											console.log(
												"```````````````````````````````````````````2",
												ctx)
											ctx.draw(false, () => {
												console.log(
													"```````````````````````````````````````````3"
													)
												let _this = this;
												setTimeout(
													function() {
														uni.canvasToTempFilePath({
															canvasId: 'mycan',
															fileType: 'jpg',
															x: 0,
															y: 0,
															quality: 1,
															success: function(
																res
																) {
																console
																	.log(
																		res
																		.tempFilePath
																		)
																// 在这里保存图片
																_this
																	.posterUrl =
																	res
																	.tempFilePath;

																uni.hideLoading()
																_this
																	.$forceUpdate();
															},
															fail: function(
																error
																) {
																console
																	.log(
																		error
																		)
															},
														})
													}, 500)
											})
										},
										error(res) {
											console.log({
												res
											})
										}
									})
								},
								fail: err => {
									console.log(err)
								}
							})
							// #endif
							// #ifdef APP
							ctx.drawImage(this.codeImg, this.posterData['conBRImg'].left, this
								.posterData['conBRImg'].top, this.posterData['conBRImg'].width,
								this.posterData['conBRImg'].height);
							ctx.save();
							console.log("```````````````````````````````````````````2")
							ctx.draw(false, (() => {
								console.log(
									"```````````````````````````````````````````3")
								let _this = this;
								setTimeout(function() {
									uni.canvasToTempFilePath({
										canvasId: 'mycan',
										fileType: 'jpg',
										x: 0,
										y: 0,
										quality: 1,
										success: function(res) {
											console.log(res
												.tempFilePath)
											// 在这里保存图片
											_this.posterUrl = res
												.tempFilePath;
											uni.hideLoading()
											_this.$forceUpdate();
											// uni.getImageInfo({
											// 	src:res.tempFilePath,
											// 	success:reh=>{
											// 		console.log(reh)
											// 		_this.posterUrl = res.path;
											// 		_this.$forceUpdate();
											// 		uni.hideLoading()
											// 	}
											// })

										},
										fail: function(error) {
											console.log(error)
										}
									})
								}, 500)
							})())
							// #endif

						})
					})
				})


			},
			toSubmits() {
				if (!this.info.num||this.info.num==0) {
					uni.showToast({
						title: "测评人数已满",
						icon: "none",
						duration: 2000
					})
					return false;
				}
				this.markFlag = true;
			},
			toSubmit() {
				this.markFlag = false;
				this.$refs.numberPad.open("需冻结" + this.info.frozen_money + "元");
			},
			closeChange(e) {
				let obj = {};
				obj.payPassword = e;
				obj.shop_evaluation_id = this.id;
				// obj.shop_id = this.info.shopObj.shop_id;
				console.log(app.$vm.globalData.shareid, app.$vm.globalData.cpid, obj.shop_evaluation_id)
				if (app.$vm.globalData.shareid && (app.$vm.globalData.cpid == obj.shop_evaluation_id)) {
					obj.share_user_id = app.$vm.globalData.shareid;
				}
				this.$u.api.shopEvaluationOrderAdd(obj).then(res => {
					console.log(res)
					this.$refs.uToast.show({
						title: "报名成功",
						type: "success",
						duration: 2000
					})
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/pageone/pages/ChatBox/ChatBox?type=user&id=" + this.info.user_id
						})
					}, 1500)
				})
				.catch(err=>{
					console.log(err)
					if(err.message == "请先设置支付密码"){
						uni.navigateTo({
							url:"/pages/pageone/pages/ChangePassword1/ChangePassword1"
						})
					}else if(err.message == "您尚未认证名片" || err.message == "请先完成达人认证"){
						uni.navigateTo({
							url:"/pages/pagefour/pages/real/real"
						})
					}
				})
			},
			getImage(url) {
				if (url && (url.indexOf("http://") != -1 || url.indexOf("https://") != -1)) {
					return url;
				} else {
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			getDetail() {
				let obj = {};
				obj.id = this.id;
				if (uni.getStorageSync("rmToken")) {
					this.$u.api.shopEvaluationDetails(obj).then(res => {
						console.log(res)
						this.info = res.data.details;
						this.info.endStr = app.$vm.getTime(Number(this.info.end_time)*1000,"/","day");
						this.$u.api.indexShopEvaluationRelationList({
							data: {
								shop_evaluation_id: this.id
							}
						}).then(rep => {
							console.log(rep)
							this.info.ShopEvaluationRelation = rep.data.list.data;
							
							this.info.ShopEvaluationRelation = this.info.ShopEvaluationRelation.map(
							pcur => {
								let dis = app.$vm.getDistance(Number(pcur.Shop.dimension), Number(
									pcur.Shop.longitude));
								pcur.distance = dis;
								return pcur;
							})
							console.log(this.info.ShopEvaluationRelation)
							let obj = {};
							for (let i = 0; i < this.info.ShopEvaluationRelation.length; i++) {
								if (i == 0) {
									obj = this.info.ShopEvaluationRelation[i];
								} else {
									if (this.info.ShopEvaluationRelation[i].distance < obj.distance) {
										obj = this.info.ShopEvaluationRelation[i];
									}
								}
							}
							console.log(obj, "``````````````")
							this.info.shopObj = obj;
							let platform = "";
							if (this.info.platform == 1) {
								platform = "抖音";
							} else if (this.info.platform == 2) {
								platform = "小红书";
							} else if (this.info.platform == 3) {
								platform = "微博";
							} else if (this.info.platform == 4) {
								platform = "大众点评";
							}
							this.shareStr = "【" + this.info.shopObj.Shop.BusinessAreas.name + "】" + this
								.info.shopObj.Shop.name + "邀请您参加" + platform + "探店，还有稿费" + this.info.talent_money + "元，粉丝" + this.info
								.fans_num + "即可报名。";
							this.$forceUpdate()
							console.log(this.info)
						})
					})
				} else {
					this.$u.api.shopEvaluationDetailsNoLogin(obj).then(res => {
						console.log(res)
						this.info = res.data.details;
						this.info.endStr = app.$vm.getTime(Number(this.info.end_time)*1000,"/","day");
						this.$u.api.indexShopEvaluationRelationList({
							data: {
								shop_evaluation_id: this.id
							}
						}).then(rep => {
							this.info.ShopEvaluationRelation = rep.data.list;
							this.info.ShopEvaluationRelation = this.info.ShopEvaluationRelation.map(
							pcur => {
								let dis = app.$vm.getDistance(Number(pcur.Shop.dimension), Number(
									pcur.Shop.longitude));
								pcur.distance = dis;
								return pcur;
							})
							let obj = {};
							for (let i = 0; i < this.info.ShopEvaluationRelation.length; i++) {
								if (i == 0) {
									obj = this.info.ShopEvaluationRelation[i];
								} else {
									if (this.info.ShopEvaluationRelation[i].distance < obj.distance) {
										obj = this.info.ShopEvaluationRelation[i];
									}
								}
							}
							this.info.shopObj = obj;
							let platform = "";
							if (this.info.platform == 1) {
								platform = "抖音";
							} else if (this.info.platform == 2) {
								platform = "小红书";
							} else if (this.info.platform == 3) {
								platform = "微博";
							} else if (this.info.platform == 4) {
								platform = "大众点评";
							}
							this.shareStr = "【" + this.info.shopObj.Shop.BusinessAreas.name + "】" + this
								.info.shopObj.Shop.name + "邀请您参加" + platform + "探店，还有稿费" + this.info.talent_money + "元，粉丝" + this.info
								.fans_num + "即可报名。";
							this.$forceUpdate()
						})
					})
				}
			},
			openMap() {
				// #ifdef MP-WEIXIN
				app.$vm.checkAuth("scope.userLocation").then(result=>{
					if(result){
						uni.openLocation({
							latitude: Number(this.info.shopObj.Shop.dimension),
							longitude: Number(this.info.shopObj.Shop.longitude),
							name: this.info.shopObj.Shop.name,
							success: res => {
								console.log(res)
							},
							fail: err => {
								console.log(err)
							}
						})
					}else{
						uni.showModal({
							title:"请检查系统定位和定位授权是否打开后重试"
						})
					}
				})
				// #endif
				// #ifdef APP
				uni.openLocation({
					latitude: Number(this.info.shopObj.Shop.dimension),
					longitude: Number(this.info.shopObj.Shop.longitude),
					name: this.info.shopObj.Shop.name,
					success: res => {
						console.log(res)
					},
					fail: err => {
						console.log(err)
					}
				})
				// #endif
			},
			callPhone() {
				// console.log(e)
				// let phone = e.target.dataset.phone || e.currentTarget.dataset.phone;
				if (!this.info.shopObj.Shop.mobile) {
					this.$refs.uToast.show({
						title: "暂未设置",
						type: "error",
						duration: 2000
					})
					return false;
				}
				uni.makePhoneCall({
					phoneNumber: this.info.shopObj.Shop.mobile.trim()
				})
			},
			toRecommendStore() {
				uni.navigateTo({
					url: "/pages/pagetwo/pages/FoodDetails/FoodDetails"
				})
			},
			toStore() {
				uni.navigateTo({
					url: "/pages/pagefive/pages/storeList/storeList?id=" + this.info.id
				})
			},
			toOfferDetails() {
				if (this.info.package_name) {
					// #ifdef APP-PLUS
					console.log(this.info.url)
					uni.navigateTo({
						url: "/pages/pagefive/pages/webView/webView?url=" + encodeURIComponent(this.info.url)
					})
					// #endif
					// #ifdef MP-WEIXIN
					uni.showModal({
						title:"请打开浏览器粘贴后查看详情",
						content:"受系统限制，小程序不支持第三方平台链接跳转。",
						confirmText:"去粘贴",
						success:res=>{
							if(res.confirm){
								uni.setClipboardData({
									data:this.info.url
								})
							}
						}
					})
					// #endif
				} else {
					uni.navigateTo({
						url: "/pages/pagethree/pages/OfferDetails/OfferDetails?id=" + this.info.ShopPackage.id
					})
				}

			},
			shareWeiXin() {

				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "https://www.ruomiankj.com/appShare.html?cpid=" + this.id + "&type=cp&shareid=" + uni
						.getStorageSync("userId"),
					title: this.info.title,
					summary: this.shareStr,
					imageUrl: "https://ruomian.oss-cn-chengdu.aliyuncs.com/logo108.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
				 },
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			toSharePosters() {
				this.shareFlag = true;
				this.getPoster();
			}
		}
	}
</script>

<style scoped lang="less">
	// ````````````````````````````````````````````````
	.toastMark {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99998;
		background: rgba(0, 0, 0, .2);
	}

	.toastWrap {
		width: 540upx;
		padding-top: 56upx;
		border-radius: 12upx;
		background: white;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 99999;
	}

	.toastWrapTit {
		font-size: 32upx;
		font-weight: bold;
		color: #000000;
		margin-bottom: 32upx;
		width: 100%;
		box-sizing: border-box;
		padding: 0 60upx;
	}

	.toastWrapTit>text {
		font-size: 32upx;
		font-weight: bold;
		color: #FF5555;
	}

	.toastWrapCon {
		font-size: 28upx;
		line-height: 36upx;
		color: #878787;
		width: 100%;
		box-sizing: border-box;
		padding: 0 60upx;
	}

	.toastBtn {
		display: flex;
		margin-top: 40upx;
		border-top: 2upx solid #DDDDDD;
		align-items: center;
	}

	.later {
		width: 50%;
		height: 98upx;
		line-height: 98upx;
		text-align: center;
		border-right: 2upx solid #DDDDDD;
		font-size: 36upx;
		color: #000000;
	}

	.onSure {
		width: 50%;
		height: 98upx;
		line-height: 98upx;
		text-align: center;
		font-size: 36upx;
		color: #108DE9;
	}

	// `````````````````````````````````````````````````

	.can {
		position: fixed;
		top: -9999999px;
		// left: 0;
	}

	.posterUrl {
		// width: 542upx;
		height: 60%;
		bottom: 212upx;
		left: 50%;
		transform: translateX(-50%);
		position: fixed;
		z-index: 1000000;
	}

	.conB {
		width: 100%;
		margin-top: 24upx;
		display: flex;
		box-sizing: border-box;
		padding: 0 10upx;
		align-items: center;
		height: 138upx;
	}

	.conBL {
		width: 124upx;
		height: 124upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: white;
		margin-right: 16upx;
	}

	.conBL>image {
		width: 112upx;
		height: 112upx;
		border-radius: 50%;
	}

	.conBC {
		width: calc(100% - 154upx);
		height: 138upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.conBC>view:nth-child(1) {
		font-size: 15px;
		line-height: 21px;
		color: white;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		margin-bottom: 4px;
	}

	.conBC>view:nth-child(2) {
		font-size: 12px;
		line-height: 17px;
		color: white;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		// margin-bottom: 8upx;
	}

	.conBR {
		width: 138upx;
		height: 138upx;
		background: white;
		border-radius: 8upx;
		margin-left: 16upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.conBR>image {
		width: 114upx;
		height: 114upx;
		border-radius: 8upx;
	}



	.conCardList {
		margin-top: 32upx;
	}

	.conCardList>image {
		width: 100%;
	}

	.conCardItem {
		width: 100%;
		height: 126upx;
		box-sizing: border-box;
		padding: 20upx 30upx 26upx 20upx;
		display: flex;
		align-items: center;
		background-image: url(../../static/share/shareItem.png);
		background-position: 0 0;
		background-size: 100% 100%;
		margin-bottom: 20upx;
	}

	.conCardItem:last-child {
		margin-bottom: 0;
	}

	.cardAvator {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		margin-right: 12upx;
	}

	.cardShareIcon {
		width: 54upx;
		height: 52upx;
		margin-left: 12upx;
	}

	.cardInfo {
		width: calc(100% - 158upx);
		height: 80upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.cardInfo>view:nth-child(1) {
		font-size: 28upx;
		color: #3F3F3F;
		font-weight: bold;
		line-height: 40upx;
		margin-bottom: 6upx;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.cardInfo>view:nth-child(2) {
		display: flex;
		align-items: center;
	}

	.cardInfo>view:nth-child(2)>view {
		font-size: 24upx;
		color: #3F3F3F;
		line-height: 34upx;
	}

	.cardInfo>view:nth-child(2)>view:nth-child(1) {
		margin-right: 20upx;
	}


	.conT {
		width: 100%;
		box-sizing: border-box;
		padding: 56upx 40upx 58upx;
		border-radius: 16upx;
		background: white;
	}

	.conAvator {
		width: 100%;
		height: 124upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.conAvatorL {
		width: 124upx;
		height: 124upx;
		border-radius: 50%;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16upx;
		position: relative;
	}

	.avatorBack {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.avatorCon {
		width: 112upx;
		height: 112upx;
		border-radius: 50%;
		position: relative;
		z-index: 9;
	}

	.conAvatorR {
		width: calc(100% - 140upx);
		height: 124upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.conAvatorRT {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.conAvatorRT>view {
		font-size: 32upx;
		line-height: 44upx;
		color: #3F3F3F;
		font-weight: bold;
	}

	.conAvatorRT>image {
		width: 18upx;
		height: 28upx;
		margin-left: 8upx;
	}

	.conAvatorRB {
		font-size: 28upx;
		color: #3F3F3F;
		line-height: 40upx;
		margin-top: 16upx;
	}

	.conUserMsg {
		// margin-top: 16upx;
		width: 100%;
		line-height: 20px;
		color: #3F3F3F;
		font-size: 14px;
		white-space: pre-wrap;
		font-weight: bold;
	}




	.backLTxt {
		width: 102upx;
		height: 50upx;
		position: absolute;
		top: 64upx;
		left: 34upx;
		z-index: 1;
	}

	.backRDr {
		width: 190upx;
		height: 52upx;
		position: absolute;
		right: 36upx;
		top: 64upx;
		z-index: 1;
	}

	.poster {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		box-sizing: border-box;
		padding: 122upx 32upx 24upx;
		z-index: -1;
		opacity: 0;
	}

	.backT {
		width: 100%;
		height: 202upx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.backMain {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -3;
	}

	.backB {
		width: 100%;
		height: 548upx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -2;
	}




	.shareMark {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 999999;
	}

	.shareBtns {
		background: white !important;
		margin: 0 !important;
		padding: 0 !important;
		outline: none !important;
		border: none !important;
	}

	.shareBtns::before {
		border: none !important;
	}

	.shareBtns::after {
		border: none !important;
	}

	.shareCon {
		width: 100%;
		height: 180upx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: white;
		z-index: 1000000;
		box-sizing: border-box;
		padding: 0 70upx;
		display: flex;
		justify-content: space-between;
	}

	.shareItem {
		// width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 20upx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.shareItem>image {
		width: 90upx;
		height: 90upx;
	}

	.shareItem>view {
		font-size: 28upx;
		line-height: 28upx;
		color: #3F3F3F;
	}


	.collect,
	.notice {
		width: 48upx;
		height: 48upx;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.ActivityDetails {
		background-color: #F3F3F3;
		height: 100vh;
		overflow: auto;
		padding-bottom: 150upx;

		// #ifdef APP-PLUS
		// padding-top: 88upx;
		// #endif
		.IconBox {
			display: flex;
			align-items: center;
			padding: 0 24upx;

			.starBox {
				margin-right: 32upx;
			}
		}

		.ActivityDetailsBox {
			padding: 16upx 24upx;

			.extensionBox {
				width: 702upx;
				background-color: #fff;
				border-radius: 8upx;

				.extensionBox_top {
					border-bottom: 2upx solid #F5F5F5;
					padding: 24upx 0 24upx 24upx;

					.extensionNameBox {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.extensionName {
							font-size: 36upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
						}

						.extensionPrice {
							// width: 68upx;
							padding: 0 8upx;
							height: 32upx;
							background: linear-gradient(206deg, #FAD96C 0%, #FFAC3F 100%);
							opacity: 1;
							border-radius: 20upx 0 0 20upx;
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							color: #FFFFFF;
							text-align: center;
							line-height: 32upx;
						}
					}

					.Number {
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						margin-top: 32upx;
					}

					.fieldBox {
						display: flex;
						align-items: center;
						margin-top: 24upx;

						.fieldtitle {
							font-size: 24upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							margin-right: 8upx;
						}

						.fieldList {
							display: flex;
							flex-wrap: wrap;
							align-items: center;

							.fieldItem {
								background: #EEEEEE;
								opacity: 1;
								border-radius: 8upx;
								padding: 8upx 16upx;
								font-size: 20upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #666666;
								margin-right: 8upx;
							}
						}
					}

					.fansBox {
						display: flex;
						align-items: center;
						margin-top: 24upx;

						.fansImage {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 48upx;
							height: 24upx;
							background: #260A20;
							opacity: 1;
							border-radius: 4upx;

							image {
								width: 24upx;
								height: 24upx;
							}
						}

						.fanstext {
							width: calc(100% - 48upx);
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							margin-left: 8upx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;

							text {
								font-size: 20upx;
								font-weight: 400;
							}
						}
					}
				}

				.extensiontitleBox {
					display: flex;
					align-items: center;
					padding: 30upx 24upx;

					.extensionImage {
						width: 48upx;
						height: 48upx;
						border-radius: 50%;
						background-color: #007AFF;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.extensiontitle {
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
						margin-left: 16upx;
					}
				}
			}

			.PackageBox {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 702upx;
				background: #FFFFFF;
				opacity: 1;
				border-radius: 8upx;
				padding: 30upx 24upx;
				margin-top: 16upx;

				.Package_L {
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #333333;
				}

				.Package_R {
					display: flex;
					align-items: center;

					.PackagePrice {
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						margin-right: 8upx;
					}
				}
			}

			.addressBox {
				width: 702upx;
				background: #FFFFFF;
				opacity: 1;
				border-radius: 8upx;
				margin-top: 16upx;
				padding: 24upx;
				background-color: #fff;

				.addressTitleBox {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.addresstitle {
						font-size: 28upx;
						color: #333333;
					}
				}

				.addressNameBox {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 44upx 0;
					border-bottom: 2upx solid #EFEFEF;

					.addressName {
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #333333;
					}
				}

				.Detailed-address {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-top: 24upx;

					.Detailed_L {
						display: flex;
						align-items: center;

						.Detailedtext {
							width: 480upx;
							font-size: 24upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							margin-left: 8upx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.Detailed_R {
						display: flex;
						align-items: center;

						.DetailedNum {
							font-size: 24upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							margin-right: 8upx;
						}
					}
				}
			}

			.detailsBox {
				width: 702upx;
				background: #FFFFFF;
				opacity: 1;
				border-radius: 8upx;
				padding: 32upx 24upx;
				margin-top: 16upx;

				.detailstitle {
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					margin-bottom: 32upx;
				}

				.detailsCont {
					
				}
			}

			.ButtonBox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				width: 750upx;
				height: 100upx;
				background: #FFFFFF;
				opacity: 1;
				padding: 16upx 24upx;
				z-index: 999;

				.ButtonItem {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 320upx;
					height: 68upx;
					background: #FF3F80;
					opacity: 1;
					border-radius: 8upx;
					margin: 0;

					.Buttonttle {
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 20upx;
					}

					.Buttontext {
						font-size: 16upx;
						color: #fff;
						line-height: 20upx;
						margin-top: 10upx;
					}
				}

				.ButtonItem2 {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 222upx;
					height: 68upx;
					background: #FF4C3F;
					opacity: 1;
					border-radius: 8upx;

					.Buttonttle {
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
					}

					.Buttontext {
						font-size: 16upx;
						color: #fff;
					}
				}

				.signupBtn {
					width: 320upx;
					height: 68upx;
					background: #FFAC3F;
					opacity: 1;
					border-radius: 8upx;
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
					line-height: 68upx;
				}
			}

			.endBox {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				width: 750upx;
				height: 100upx;
				background-color: #D8D8D8;
				text-align: center;
				line-height: 100upx;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				z-index: 999;
			}
		}
	}
</style>
